<template>
  <div class="form-setting-group form-setting-group-small form-common-setting">
    <div class="form-common-setting-panel">
      <h4 class="form-common-setting-title">
        <span class="form-common-setting-title-name">{{$t('common.base.title')}}</span>
       
        <el-tooltip :content="questionText" placement="top">
          <i class="iconfont icon-question" v-if="showQuestionIcon"></i>
        </el-tooltip>
        <span class="form-common-setting-title-remind" v-if="showMaxLength">{{$t('common.base.formMaxLenthTips', {maxLength: TitleShowMaxLengthMax})}}</span>
      </h4>
      <div class="form-type-text">{{ setting.name }}</div>
    </div>
    <div class="form-type-text-lang">
      <input type="text" :disabled="(field.setting&&field.setting.notEdit)||disabled" data-prop="displayName" :placeholder="$t('common.placeholder.languageSetInput.required')" v-model="field.displayName" @input="update" :maxlength="TitleShowMaxLengthMax">
      <base-select-language 
        v-if="isShow"
        :title="$t('common.base.title')"
        :field="field"
        :defaultOption="{
          disabled:disabled,
          formType:'text',
        }"
        defaultFormType="text"
        :maxlength="TitleShowMaxLengthMax"
        :defaultValue="field.displayName"
        :defaultValueLanguage="field.displayNameLanguage"
        @save="save"
      >
      </base-select-language>
    </div>
  </div>
</template>

<script>
/* config */
import * as config from '@src/component/form/config';
/* props */
import { settingProps } from '@src/component/form/components/props';
// utils
import { languagesList, isMultiLangModules } from '@src/component/util/multiLang/index';
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'
import locales from '@src/locales'

export default {
  name: 'form-title-setting',
  props: {
    ...settingProps,
    disabled: {
      type: Boolean,
      default: false
    },
    showQuestionIcon: {
      type: Boolean,
      default: false
    },
    questionText: {
      type: String,
      default: ''
    },
    showMaxLength: {
      type: Boolean,
      default: true
    },
    formTitleMaxLength: {
      type: [ Number, String ],
      default: 0
    }
  },
  setup() {
    return {
      languagesList,
    }
  },
  computed: {
    // 标题内容展示最大数量
    TitleShowMaxLengthMax() {
      return this.formTitleMaxLength || config.FIELD_NAME_LENGTH_MAX;
    },
    // 事件表单+回执表单显示多语言配置
    isShow() {
      const isOpenMultiLanguage = getOpenMultiLanguage();
      return isOpenMultiLanguage && isMultiLangModules(this.mode) && this.field.formType !== 'relationCustomer' && this.field.formType !== 'relationProduct';
    }
  },
  methods: {
    update(value) {
      if(this.field?.displayNameLanguage){
        // 修改标题参数时，同步修改语言库中数据
        this.field.displayNameLanguage[locales.locale] = this.field.displayName
      }
      this.$emit('input', value, 'displayName');
    },
    save(data){
      /**  适配原有逻辑，将数据组合成 实例
      * 具体可查看 .\src\component\form\FormDesign.js 的 input 和 form-title-setting 引用的 @input="updateForDom"
      */
     
      // 中文数据回填
      if(this.field.displayName !== data[locales.locale]){
        this.field.displayName = data[locales.locale]
      }

      const event ={
        target: {
          dataset: {
            prop: 'displayNameLanguage'
          },
          value: data
        }
      }
     this.$emit('input', event);
    }
  }
}
</script>

<style lang="scss" scoped>
.form-common-setting {
  .form-type-text {
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    
    font-size: $font-size-small;
    color: $text-color-regular;
    background-color: $bg-color-l3;
    border-radius: 10px;
  }
  .form-type-text-lang{
    display: flex;
    input{
      height: 32px;
      flex: 1;
    }
    p{
      width: 32px;
      height: 32px;
      background: #F5F8FA;
      border-radius: 4px;
      border: 1px solid #CBD6E2;
      text-align: center;
      line-height: 30px;
      margin-left: 8px;
      .iconfont{
        font-size: 18px;
        color: #595959;
      }
    }
  }
}
</style>